<template>
    <div class="mainWarp">
        <van-nav-bar title="商品分类" />
        <van-tree-select v-model:main-active-index="activeIndex" height="90vh" :items="typelist"
            @click-nav="changeType">
            <template #content>
                <div class="aui-flex-links" v-if="prolist.length > 0">
                    <router-link v-for="item in prolist" :key="item.id"
                        :to="{ path: '/product/info', query: { proid: item.id } }" class="aui-flex-links-item">
                        <div class="aui-flex-links-img"><img :src="item.thumb_text" alt="" /></div>
                        <div class="aui-flex-links-text">{{ item.name }}</div>
                    </router-link>
                </div>
                <div class="aui-flex-links" v-else>
                    <div style="color: #c8c9cc; text-align: center">暂无商品数据</div>
                </div>
            </template>
        </van-tree-select>
    </div>
    <Footer />
</template>
<script setup>

const typelist = ref([{
    text: "全部",
    id: 0,
    thumb_text: "",
}]);
const prolist = ref([]);
const typeid = ref(0);
const activeIndex = ref(0);
onMounted(() => {
    TypeData();
    getTypeData();
});
// 获取产品数据
const TypeData = async () => {
    var data = {
        typeid: typeid.value,
        flag: 0,
        orderby: "id",
        keywords: "",
    };
    var result = await Api.productList(data);
    if (result.code == 1) {
        prolist.value = result.data;
    }
};
// 获取分类
const getTypeData = async () => {
    var result = await Api.productType();
    if (result.code == 1) {
        result.data.forEach((item) => {
            typelist.value.push({
                text: item.name,
                id: item.id,
                thumb_text: item.thumb_text,
            });
        });
    }
}
const changeType = (index) => {
    typeid.value = typelist.value[index].id;
    TypeData();
};
</script>
<style>
.aui-flex-links {
    padding: 10px 8px;
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    margin-top: 15px;
    padding-bottom: 20px;
}

.aui-flex-links-item {
    position: relative;
    float: left;
    padding: 5px 0;
    width: 44%;
    box-sizing: border-box;
    margin: 0 3%;
}

.aui-flex-links-img {
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.aui-flex-links-text {
    color: #444;
    font-size: 12px;
    text-align: center;
    padding-top: 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.van-nav-bar {
    background: rgb(50, 128, 111);
}

.van-nav-bar__title {
    color: white;
}

</style>